<template>
	<div class="foundation_container">
		<div class="layoutHeader">
      <minHeader class="header" :menusStructure="navItems" />
    </div>

		<!-- <div class="foundationHeader">
			<div class="foundation_header">
				<div class="foundation_header_leftContainer">
					<div class="foundation_header_leftLogo_container">
						<img src="../assets/logo.png" alt="">
					</div>
					<minMenu style="margin-left: 30px;" :structure="navItems" inline jump="replace" />
				</div>
				<div class="foundation_header_rightContainer" @mouseenter="showDropdown = true"
					@mouseleave="showDropdown = false">
					<img v-if='!state.userInfo.name' class="avatar-img" src="@/assets/user.png" alt="">
					<div class="avatar-img" v-if='state.userInfo.name'>
						{{ state.userInfo.name.slice(-2) }}
					</div>
					<div v-if="showDropdown" class="dropdown-menu">
						<div v-if="!isTeacher()" class="dropdown-item" @click='userInformation'>账号信息</div>
						<div class="dropdown-item" @click="logout">退出登录</div>
					</div>
				</div>
			</div>
		</div> -->
		
		<div class="foundationContent">
			<StarBackground />
			<RouterView />
		</div>
	</div>
</template>

<script setup>
import StarBackground from '@/components/StarBackground.vue'
import minMenu from '@/components/common/minMenu.vue'
import minHeader from '@/components/common/minHeader.vue'

import { isTeacher } from "@/stores/info"

import {
	ref,
	onMounted
} from "vue";
import {
	useRouter,
	RouterView,
	useRoute
} from 'vue-router';
import { signOut } from '@/request/login.js';
import { clearUserInfo, state } from '@/stores/info.js'


const currentNavItems = ref(['Home']);
const router = useRouter()

const navItems = ref(isTeacher() ? state.menusStructure : state.studentMenusStructure)
const showDropdown = ref(false);

function userInformation() {
	router.push({
		name: 'PersonalInformation'
	});
}
async function loginOut() {
	router.replace({
		name: 'login'
	})
	clearUserInfo();
	await signOut()
}

const loginClick = () => {
	router.push({
		name: 'Login'
	});
}

const registeredClick = () => {
	router.push({
		name: 'Registered'
	});
}

const navToPage = (opt) => {
	if (!opt || !opt.name) {
		router.push({
			name: 'Home'
		});
		return;
	}
	if (opt.redirect) {
		router.replace({
			name: opt.name
		});
		return;
	}
	router.push({
		name: opt.name
	});
}

const clickNavItem = (e) => {
	navToPage({
		name: e.key
	});
}

const findDeepestMatchedRoute = (routeName, routeList) => {
	for (let i = 0; i < state.studentMenusStructure.length; i++) {
		if (routeList[i].children && routeList[i].children.length > 0) {
			return findDeepestMatchedRoute(routeName, routeList[i].children);
		}
		if (routeList[i].key === routeName) {
			return routeName;
		}
	}
	return '';
}

const logout = () => {
	console.log('用户退出登录');
	loginOut();
}

onMounted(() => {
	console.log('mounted')
	let route = useRoute();
	console.log('route', route)
	for (let i = route.matched.length - 1; i >= 0; i--) {
		let nowDeepestRouteName = findDeepestMatchedRoute(route.name, state.studentMenusStructure);
		console.log('nowDeepestRouteName', nowDeepestRouteName)
		if (nowDeepestRouteName) {
			currentNavItems.value = [route.name];
			return;
		}
	}
	currentNavItems.value = ['Home']
	console.log(isTeacher(), 'isTeacher()')

})
</script>

<style lang="scss" scoped>
$logoWidth: 50px;
$userImgWidth: 50px;
$headerMinHeight: 78px;

.foundation_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	height: 100%;

	.foundationHeader {
		height: 8%;
		min-height: $headerMinHeight;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.foundation_header {
		width: $viewMinWidth;
		height: 100%;
		@include FlexCenterAndCenter;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;

		.foundation_header_leftContainer {
			@include FlexCenterAndCenter;
			width: 48%;
			height: 100%;

			.foundation_header_leftLogo_container {
				min-width: 50px;
				max-width: 50px;
				margin-right: 12px;
				border-radius: 50%;
				overflow: hidden;

				.foundation_header_leftLogo_container {
					min-width: 50px;
					max-width: 50px;
					margin-right: 12px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						-webkit-user-drag: none;
					}
				}

				.foundation_header_nav {
					width: calc(100% - $logoWidth);
					height: 70%;
					border-bottom: none;

					:deep(.ant-menu-item-selected),
					:deep(.ant-menu-item:hover),
					:deep(.ant-menu-submenu-selected>.ant-menu-submenu-title) {
						color: black;
					}

					:deep(.ant-menu-item:hover::after),
					:deep(.ant-menu-item-selected::after),
					:deep(.ant-menu-submenu-active::after),
					:deep(.ant-menu-submenu-selected::after) {
						border-color: $theme1BgColorDeep;
						border-bottom-width: 2px;
					}
				}
			}

			.foundation_header_rightContainer {
				height: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end;
				position: relative;

				.avatar-img {
					// display: block;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(128, 94, 143, 0.2);
					width: $userImgWidth;
					height: $userImgWidth;
					border-radius: 50%;
					cursor: pointer;
					-webkit-user-drag: none;
				}
			}

			.foundation_header_nav {
				width: calc(100% - $logoWidth);
				height: 70%;
				border-bottom: none;

				:deep(.ant-menu-item-selected),
				:deep(.ant-menu-item:hover),
				:deep(.ant-menu-submenu-selected>.ant-menu-submenu-title) {
					color: black;
				}

				:deep(.ant-menu-item:hover::after),
				:deep(.ant-menu-item-selected::after),
				:deep(.ant-menu-submenu-active::after),
				:deep(.ant-menu-submenu-selected::after) {
					border-color: $theme1BgColorDeep;
					border-bottom-width: 2px;
				}
			}
		}

		.foundation_header_rightContainer {
			height: 100%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: end;
			-ms-flex-pack: end;
			justify-content: flex-end;
			position: relative;

			.avatar-img {
				// display: block;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(128, 94, 143, 0.2);
				width: $userImgWidth;
				height: $userImgWidth;
				border-radius: 50%;
				cursor: pointer;
				-webkit-user-drag: none;
			}

			.dropdown-menu {
				width: 176px;
				position: absolute;
				top: 100%;
				right: 0;
				background-color: white;
				border-radius: 4px;
				z-index: 1000;
				-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

				.dropdown-item {
					@include sliderInAniNegative45Deg();
					margin: 10px 10px;
					cursor: pointer;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					height: 40px;
					border-radius: 5px;
					-webkit-transition: all 0.3s ease;
					transition: all 0.3s ease;

					&:hover {
						background-color: $theme1BgColorDeep;
						color: white;
					}
				}
			}
		}
	}
	.layoutHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    .header {
      width: $viewMinWidth;
    }
  }
	.foundationContent {
		overflow: hidden;
		position: relative;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		min-height: 0;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}
</style>
